<template>
<div>
  <div class="container-fluid standard-bg">
    <div class="col-lg-1"></div>
    <div class="main-content col-lg-10">
      <!-- CORE -->
      <div class="row">
        <!--    轮播图    -->
        <Indicators :message="indicator"></Indicators>
        <!-- HOME MAIN POSTS -->
        <div class="col-lg-6 col-md-9">
          <section id="home-main">
            <h2 class="icon" @click="handle()"><i class="fa fa-flag" aria-hidden="true"></i>新番导航</h2>
            <a :href="toTimeline" class="more-list">
              <h4>新番时间表&nbsp;&nbsp;<i class="fa fa-chevron-right" aria-hidden="true"></i></h4>
            </a>
            <!-- ARTICLES -->
            <div id="new-list" class="row auto-clear">
              <Video1 v-for="item in videoList1" :key="item.id" :message="item.data"></Video1>
            </div>
          </section>
        </div>
        <div class="hidden-xs margin-padding-0">
          <Video4 v-for="item in videoList4" :key="item.id" :message="item.data"></Video4>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </div>

  <Recommend :message="recommendList[0]"></Recommend>
  <Recommend :message="recommendList[1]"></Recommend>
  <Recommend :message="recommendList[2]"></Recommend>

  <!-- CHANNELS -->
  <div id="channels-block" class="container-fluid channels-bg">
    <div class="container-fluid ">
      <div class="col-md-12">
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import Recommend from '../../components/recommend/Recommend'
import Indicators from '../../components/Indicators'
import Video1 from '../../components/video/Video1'
import Video4 from '../../components/video/Video4'
import {getIndicators, getRecentAnimeVideos} from './index-js'
export default {
  name: 'Index',
  data () {
    return {
      toTimeline: '/#/anime/timeline',
      indicator: {
        type: true,
        items: [
          {id: 0, isActive: true, cover: require('../../assets/img/slide1.png'), title: '关我姆事', href: '#'},
          {id: 1, isActive: false, cover: require('../../assets/img/slide2.png'), title: '天降之物', href: '#'},
          {id: 2, isActive: false, cover: require('../../assets/img/slide3.png'), title: '出包王女', href: '#'}
        ]
      },
      videoList1: [
        {id: 0, data: {no: 13, count: 2000, cover: null, href: '#', name: 'Video Lightbox Test'}},
        {id: 1, data: {no: 13, count: 2000, cover: null, href: '#', name: 'Video Lightbox Test'}}
      ],
      videoList4: [
        {id: 0, data: {no: 13, count: 2000, cover: null, href: '#', name: 'Video Lightbox Test'}},
        {id: 1, data: {no: 13, count: 2000, cover: null, href: '#', name: 'Video Lightbox Test'}},
        {id: 2, data: {no: 13, count: 2000, cover: null, href: '#', name: 'Video Lightbox Test'}},
        {id: 3, data: {no: 13, count: 2000, cover: null, href: '#', name: 'Video Lightbox Test'}},
        {id: 4, data: {no: 13, count: 2000, cover: null, href: '#', name: 'Video Lightbox Test'}},
        {id: 5, data: {no: 13, count: 2000, cover: null, href: '#', name: 'Video Lightbox Test'}}
      ],
      recommendList: [
        {type: 0, more: '/#/anime'}, {type: 1, more: '/#/manga'}, {type: 2, more: '/#/novel'}
      ]
    }
  },
  methods: {
    handle () {
      console.log('滚动')
      document.getElementById('app').scrollIntoView()
    }
  },
  components: {Video4, Video1, Indicators, Recommend},
  mounted: function () {
    // 获取轮播图数据
    getIndicators(this)
    // 获取最近更新
    getRecentAnimeVideos(this)
  }
}
</script>

<style scoped>

</style>
